import { FC, useState } from 'react';
import { Layout, Menu, Progress, Card, Row, Col, message } from 'antd';
import {
  LineChartOutlined,
  ScheduleOutlined,
  HistoryOutlined,
} from '@ant-design/icons';
import styled from 'styled-components';
import StudyTrainButton from './train/StudyTrainButton';
import { getPreviewUrl } from '@utils/WeStudyUtil';
import { httpPost } from '@utils/HttpUtil';
import { ProgressProps } from 'antd/lib';

const { Header, Content } = Layout;

const UserStudy: FC = () => {
  const [currentMenu, setCurrentMenu] = useState('training');
  
  // 导航菜单配置
  const menuItems = [
    {
      label: "刷题",
      key: "training",
      icon: <LineChartOutlined />,
    },
    {
      label: "数据",
      key: "progress",
      icon: <ScheduleOutlined />,
    },
    {
      label: "切换科目",
      key: "history",
      icon: <HistoryOutlined />,
    },
  ];

  const coverImage = getPreviewUrl() + "386a4e5cd20146b9b9289bcfd7e171ed";

  var summary = httpPost("/userTrain/getUserTrainSummary", {}).data;
  const [trainSummary, setTrainSummary] = useState<any>(summary);

  const conicColors: ProgressProps['strokeColor'] = {
    '0%': '#87d068',
    '50%': '#ffe58f',
    '100%': '#ffccc7',
  };

  const getTrainSummary = () =>{
    var summary = httpPost("/userTrain/getUserTrainSummary", {}).data;
    setTrainSummary(summary);
  }

  const formatDisplay = (percent:any) => (
    <>{`${trainSummary.trained}/${trainSummary.trainCount}`}</>
  );

  const formatTodayDisplay = (percent:any) => (
    <>{`${trainSummary.todayTrained}/${trainSummary.todayNeedTrain+trainSummary.todayTrained}`}</>
  );

  return (
    <StyledWrapper>
      <Layout>
        <Header style={{ background: "#1890ff", padding: "0 20px" }}>
          <Menu
            theme="dark"
            mode="horizontal"
            selectedKeys={[currentMenu]}
            items={menuItems}
            style={{
              background: "transparent",
              marginLeft: "35%",
              minWidth: 0,
              flex: "auto",
            }}
            onSelect={({ key }) => {
              message.info(`当前选择的是${key}`);
              setCurrentMenu(key);
            }}
          />
        </Header>

        {/* 主体内容 */}
        <Content style={{ padding: "40px 20px" }}>
          <Row gutter={[20, 20]}>
            <Col xs={24} md={16}>
              <Card
                title="学习内容"
                hoverable
                cover={
                  <img
                    height={360}
                    style={{ objectFit: "contain" }}
                    src={coverImage}
                  />
                }
              ></Card>
            </Col>

            {/* //右侧补充信息区域 */}
            <Col xs={24} md={8}>
              <Card title={"学习进度 "+trainSummary.trainedTime} bordered={false} hoverable>
                <div style={{ textAlign: "center" }}>
                  <Progress
                    percent={trainSummary.percent}
                    format={formatDisplay} // 自定义文字
                    type="circle"
                    strokeColor={conicColors}
                  />
                  <p style={{ marginTop: 16 }}>当前进度：{trainSummary.level}</p>
                </div>
              </Card>

              <Card
                title={"今日进度 "+trainSummary.todayTrainedTime}
                bordered={false}
                style={{ marginTop: 20, height: 170 }}
                hoverable
              >
                <Progress percent={100*trainSummary.todayTrained/(trainSummary.todayNeedTrain+trainSummary.todayTrained)} 
                status="active"
                format={formatTodayDisplay} // 自定义文字
                percentPosition={{ align: 'end', type: 'inner' }}
                style={{ marginTop: 20 }}
                size={[430, 20]}
                strokeColor={{ from: '#108ee9', to: '#87d068' }} />
                
              </Card>
            </Col>
          </Row>

          <StudyTrainButton />
        </Content>
      </Layout>
    </StyledWrapper>
  );
}


const StyledWrapper = styled.div`

.suggestion-list {
  list-style: none;
  padding-left: 0;
}

.suggestion-list li {
  padding: 12px;
  margin: 8px 0;
  background: #e6f7ff;
  border-radius: 4px;
}`;

export default UserStudy;